<template>
  <!-- 保存提示 -->
  <el-dialog title="温馨提醒" :visible.sync="dialogVisible0" @close="handleClose" center width="30%">
    <el-form :model="pageformdata" :rules="rules" ref="customFrom">
      <el-form-item label="请输入页面备注信息，再保存页面"  prop="note">
        <el-input v-model="pageformdata.note" autocomplete="off" placeholder="请输入页面备注信息"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSumit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { defineComponent, toRefs, watch, ref, getCurrentInstance } from 'vue';

export default defineComponent({
  name: "ConfrimDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    pageformdata: {
      type: Object
    }
  },
  setup (props, { emit }) {
    const rules = {
      note: [{ required: true, message: "请填写备注", trigger: "blur" }]
    };
    const { dialogVisible, pageformdata } = toRefs(props);
    const dialogVisible0 = ref(false); 
    const vue = getCurrentInstance();
    watch(dialogVisible, (val) => {
      dialogVisible0.value = val
    })

    const handleClose = (done) => {
      dialogVisible0.value = false;
      // this.$emit('close');
      emit('update:dialogVisible', false);
    }
    const handleSumit = () => {
      dialogVisible0.value = false;
      vue.proxy.$refs['customFrom'].validate(async (valid) => {
        if (valid) {
          emit('update:dialogVisible', false);
          emit('onSave');
        } else {
          vue.proxy.$message({
            message: '请填写备注',
            type: 'warnning'
          })
        }
      })
    }
    return {
      dialogVisible0,
      pageformdata,
      rules,
      handleClose,
      handleSumit
    }
  }
})
</script>